<template>
  <div>
<div>
  <el-input v-model="input" style="width: 20%" placeholder="请输入病人姓名"/>
  <el-button type="primary" style="margin: 5px" @click="selectOnePatient">搜索</el-button>
  <el-button type="primary" style="margin: 5px" @click="getAllPatient">显示全部病人</el-button>
</div>
  <el-table :data="patientDatalist.slice((currentPage - 1) * pageSize, currentPage * pageSize) " border style="width: 100%">
    <el-table-column prop="patientId" label="病人ID" width="100" />
    <el-table-column prop="patientName" label="姓名" width="100" />
    <el-table-column prop="patientSex" label="性别" width="80"/>
    <el-table-column prop="patientAge" label="年龄" width="80"/>
    <el-table-column prop="patientBloodtype" label="血型" width="100"/>
    <el-table-column prop="patientDep" label="科室" width="100"/>
    <el-table-column prop="patientPic" label="病人图片" width="200">
      <template #default="scope">
        <img :src="scope.row.patientPic" alt="没有图片可供参考"
             style="width: 150px;height: 150px">
      </template>
    </el-table-column>
    <el-table-column prop="patientSym" label="症状" width="200" />
    <el-table-column prop="patientPrev" label="病史"/>
  </el-table>
    <div class="demo-pagination-block">
      <div class="demonstration"></div>
      <el-pagination
          layout="total,prev,pager,next,jumper"
          :total="patientDatalist.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
      />
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "Patient",
  data() {
    return {
      patientDatalist: [],
      currentPage: 1,
      pageSize: 5,
      input: "",
    }
  },
  created() {
    this.getAllPatient();
  },
  methods: {
    getAllPatient() {
      axios.get("/api/patient").then((res) => {
        this.patientDatalist = res.data.data;
        this.message = res.data.msg;
      });
    },
    handleSizeChange: function (size) {
      this.pageSize = size;
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    selectOnePatient() {
      axios.get("/api/patient/"+this.input).then((res) => {
        if(res.data.code==20041) {
          this.patientDatalist = res.data.data;
          this.message = res.data.msg;
          this.data.splice(1, 0);
        }
        else {
          this.patientDatalist=[];
          this.input = "";
        }
      });
    },
  }
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>